<template>
  <a-row :gutter="[8,32]">
    <a-col :sm="12" :xxl="4">
      <a-card title="今日各班出勤率" class="center" :bordered="false">
        <div class="data-main" style="height: 400px;">
          <div v-for="(item,index) in attendanceList" :key="item.id" :class="attenIndex == index?'data-active':''" @click="viewData1(index)">
            <a-row class="data-content">
              <a-col class="title" :span="8">
                {{ item.className }}
              </a-col>
              <a-col class="rate right" :span="16">
                {{ item.rate }}%
              </a-col>
            </a-row>
          </div>
        </div>
      </a-card>
    </a-col>
    <a-col :sm="12" :xxl="10">
      <a-card :bordered="false">
        <div class="ant-card-head-wrapper">
          <div class="ant-card-head-title">
            <span class="bg">{{ selectClass1 }}</span>
          </div>
          <div class="ant-card-extra">
            <a slot="extra" @click="handleDetail('week')">查看详情<a-icon type="caret-right" /></a>
          </div>            
        </div>          
        <p class="subtitle" style="margin-bottom: 14px;">数据时间：{{currentTime}}</p>
        <div ref="lineBar1" :style="{width:'100%',height:'368px'}"></div>
      </a-card>
    </a-col>
    <a-col :sm="24" :xxl="10">
      <a-card :bordered="false">
        <div class="ant-card-head-wrapper">
          <div class="ant-card-head-title">
            <span class="bg">{{ selectClass1 }}</span>
          </div>
          <div class="ant-card-extra">
            <a slot="extra" @click="handleDetail('month')">查看本月<a-icon type="caret-right" /></a>
          </div>
        </div>
        <a-table :columns="columns" :data-source="dataSource" :pagination="false" :scroll="{y:348}">
          <span slot="checkInTime" slot-scope="text, record">
            <span :style="{ color: text ? (record.late ? '#FF9933' : '') : '#f00' }">
              {{ text || '--' }}
            </span>
          </span>
          <span slot="status" slot-scope="text, record">
            <span :style="{ color: record.checkInTime ? (text ? '#FF9933' : '') : '#f00' }">
              {{ record.checkInTime ? (text ? '迟到' : '正常') : '缺勤' }}
            </span>
          </span>
        </a-table>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import "@/assets/less/ClassAndCard.less"
import doubleLineChart from '@/components/Echarts/doubleLine.vue'
import { getAction } from '@/api/manage'
export default {
  name: 'actual',
  components: {
    doubleLineChart
  },
  data() {
    return {
      url: {
        list: 'management/skStudentCheck/getStudentCheckStatistical',
        stuList: 'management/skStudentCheck/getTodayStudentCheck'
      },
      currentTime: new Date().toLocaleString(),
      attenIndex: 0,
      lateIndex: 0,
      selectClass1: '全园',
      dataSource: [],
      attendanceList:[],
      lateList: [],
      attendanceChartList: [],
      attendanceClassWeekList:[],
      attendanceWeekList: [],
      columns: [],
      columnsAll: [
        {
          title: '年级',
          dataIndex: 'classType',
          key: 'classType',
          filters: [
            {
              text: '小班',
              value: '小班',
            },
            {
              text: '中班',
              value: '中班',
            },
            {
              text: '大班',
              value: '大班',
            },
          ],
          onFilter: (value, record) => record.classType.indexOf(value) === 0,
        },
        {
          title: '班级',
          dataIndex: 'className',
          key: 'className',
        },
        {
          title: '应到人数',
          dataIndex: 'shouldArrive',
          key: 'shouldArrive',
        },
        {
          title: '出勤人数',
          dataIndex: 'actualArrival',
          key: 'actualArrival',
        },
        {
          title: '出勤率(%)',
          dataIndex: 'rate',
          key: 'rate',
          defaultSortOrder: 'descend',
          sorter: (a, b) => a.rate - b.rate,
          customRender:function (text) {
            return text + '%';
          }
        },
      ],
      columnsClass: [
        {
          title: '班级',
          dataIndex: 'className',
          key: 'studentName',
          align: 'center',   
        },
        {
          title: '幼儿',
          dataIndex: 'studentName',
          key: 'studentName',
          align: 'center',   
        },
        {
          title: '出勤时间',
          dataIndex: 'checkInTime',
          key: 'checkInTime',
          align: 'center',    
          scopedSlots: { customRender: 'checkInTime' },
        },
        {
          title: '状态',
          dataIndex: 'late',
          key: 'late',
          align: 'center',   
          scopedSlots: { customRender: 'status' },
        },
      ],
    }
  },

  filters: {},

  computed: {},

  created() {},

  activated() {},

  mounted() {
    this.load();
    this.currentTime = this.$skCommon.getDate(0)
  },
  methods: {
    //初始化加载数据
    load() {
      this.initList();
      this.initCharts();
    },
    initList() {
      this.columns = this.columnsAll;
      // 查询列表数据
      const paramsTotal = {
        statisticalScope: 'class',
        timeScope: 'today',
      }
      getAction(this.url.list, paramsTotal).then(res => {
        var totalItem = {
          classId: null,
          className: '全园',
          shouldArrive: 0,
          actualArrival: 0,
          late: null,
          lateRate: null,
          rate: 0,
        }

        res.result.forEach(el => {
          el.rate = (el.rate * 100).toFixed(2);
          el.lateRate = (el.lateRate * 100).toFixed(2);
          totalItem.shouldArrive += el.shouldArrive;
          totalItem.actualArrival += el.actualArrival;
          totalItem.late += el.late;
        });

        totalItem.rate = (totalItem.actualArrival/totalItem.shouldArrive*100).toFixed(2);
        totalItem.lateRate = (totalItem.late/totalItem.shouldArrive*100).toFixed(2);

        this.attendanceList = [totalItem].concat(res.result); 
        this.lateList = [totalItem].concat(res.result)

        this.dataSource = this.attendanceList.filter(item => {
          return item.className != '全园'
        })

      })
    },
    initCharts() {
      // 查询每周全园数据
      const paramsWeek = {
        statisticalScope: 'all',
        timeScope: 'week'
      }
      getAction(this.url.list, paramsWeek).then(res => {
        res.result.forEach(el => {
          el.rate = (el.rate * 100).toFixed(2);
          el.lateRate = (el.lateRate * 100).toFixed(2);
        });

        this.attendanceWeekList = res.result;
        this.attendanceChartList = res.result;
        
        // 画报表
        this.initChart(this.$refs.lineBar1, ['出勤率(%)','人数']);
        // this.initLineChart();
        // this.getEchart();
      })

      // 查询每周单班报表的数据
      const paramsClassWeek = {
        statisticalScope: 'class',
        timeScope: 'week'
      }
      getAction(this.url.list, paramsClassWeek).then(res => {
        this.attendanceClassWeekList = res.result;
        
        res.result.forEach(el => {
          el.rate = (el.rate * 100).toFixed(2);
          el.lateRate = (el.lateRate * 100).toFixed(2);
        });
      })
    },
    viewData1(i){
      this.attenIndex = i;
      this.selectClass1 = this.attendanceList[i].className;

      const classId = this.attendanceList[i].classId;      
      if(classId){
        this.attendanceChartList = this.attendanceClassWeekList.filter(item => {
          return item.classId == classId;
        })
        this.columns = this.columnsClass;
        this.initStudentTable(classId);
      } else {
        this.columns = this.columnsAll;
        this.attendanceChartList = this.attendanceWeekList;
        this.dataSource = this.attendanceList.filter(item => {
          return item.className != '全园'
        })
      }
      const legendTitle = ['出勤率(%)','人数'];
      this.initChart(this.$refs.lineBar1, legendTitle);
    },
    initStudentTable(classId) {
      // 查询列表数据
      const paramsTotal = {
        classId: classId
      }
      getAction(this.url.stuList, paramsTotal).then(res => {
        // res.result.forEach(el => {
        //   el.rate = (el.rate * 100).toFixed(2);
        //   el.lateRate = (el.lateRate * 100).toFixed(2);
        //   totalItem.shouldArrive += el.shouldArrive;
        //   totalItem.actualArrival += el.actualArrival;
        //   totalItem.late += el.late;
        // });
        this.dataSource = res.result
      })
    },
    initChart(el, legendTitle) {
      var myChartSports;
      if(this.$echarts.getInstanceByDom(el)) {
        myChartSports = this.$echarts.getInstanceByDom(el)
      }
      else{
        myChartSports = this.$echarts.init(el)
      }
      const optionChart = this.getOptions(legendTitle);
      myChartSports.setOption(optionChart);
      window.addEventListener("resize", ()=>{
        myChartSports.resize();
      })
    },
    getOptions(legendTitle) {
      var categorySports = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
      legendTitle = legendTitle ? legendTitle : ['出勤率(%)','人数'];
      var countDataSports = [0,0,0,0,0,0,0];
      var rateDataSports = [0,0,0,0,0,0,0];
      this.attendanceChartList.forEach(el => {
        if(el.weekDay == 0) {
          countDataSports[6] = el.actualArrival;
          rateDataSports[6] = el.rate;
        }else{
          countDataSports[el.weekDay - 1] = el.actualArrival;
          rateDataSports[el.weekDay - 1] = el.rate;
        }
      });

      // option
      let optionSports = {
        backgroundColor: '#fff',
        tooltip: {
          borderColor: 'transparent',
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.5)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#333'
            }
          },
          textStyle: {
            align: 'left',
            color: '#fff',
            fontSize: '12'
          }
        },
        legend: {
          data: legendTitle,
          textStyle: {
            color: '#ccc'
          }
        },
        grid: {
          left: '14%',
          top: '10%',
          right: '13%',
          bottom: '10%'
        },
        xAxis: {
          data: categorySports,
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },
        yAxis: [
          {
            name: legendTitle[0],
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          },
          {
            name: legendTitle[1],
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          },
        ],
        dataZoom:[
          {
            type: 'slider',
            realtime: true,
            start: 0,
            end: categorySports.length >= 15 ?40:100,  // 初始展示40%
            height: 4,
            fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
            borderColor: "rgba(17, 100, 210, 0.12)", 
            handleSize:0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top:'96%',
            
            // zoomLock:true, // 是否只平移不缩放
            // moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
            // zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
          },
          // { 
          //   type: "inside",  // 支持内部鼠标滚动平移
          //   start: 0,
          //   end: 40,
          //   zoomOnMouseWheel: false,  // 关闭滚轮缩放
          //   moveOnMouseWheel: true, // 开启滚轮平移
          //   moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
          // }
        ],
        series: [
          {
            name: legendTitle[0],
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#0BA6E3'
              }
            },
            data: rateDataSports
          },
          {
            name: legendTitle[1],
            type: 'bar',
            barWidth: 10,
            yAxisIndex: 1,//选择index为1的Y轴作为参考系
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#0CDF8A'
                  },
                  {
                    offset: 1,
                    color: '#3EACE5'
                  }
                ])
              }
            },
            data: countDataSports
          },
        ]
      }

      return optionSports;
    },
    handleDetail(dateType) {
      let data = {
        show: false,
        actualShow: true,
        lateShow: false,
      }
      this.$emit("cardData", data, dateType);
    },
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
/* @import url(); 引入css类 */
@import '~@assets/less/skReport.less';

/deep/ .ant-table-wrapper{
  height: 403px;
}

</style>
